<template>
  <div>
    <h2>订单信息</h2>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/MemberMain">主页</el-breadcrumb-item>
      <el-breadcrumb-item>订单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card style="margin-top: 20px;">
      <el-table :data="orderList" style="width: 100%;">
        <el-table-column prop="orderId" label="订单编号" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsPrice" label="单价(元)" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column label="小计">
          <template #default="scope">
            {{ (parseFloat(scope.row.price) * parseInt(scope.row.quantity, 10)).toFixed(2) }} 元
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" >
          <template #default="scope">
            {{ formatDate(scope.row.orderTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag
                :type="scope.row.status === '已处理' ? 'success' : 'danger'"
                disable-transitions
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import dayjs from "dayjs";

const orderList = ref([])

onMounted(() => {
  axios.get('/server/goodsOrder/findByMemberAccount', {
    headers: {
      'Authorization': localStorage.getItem('token')  // 如果你是用token鉴权，这里带上token
    },
    withCredentials: true
  })
      .then(res => {
        if (res.data.code === 200) {
          orderList.value = res.data.data
        } else {
          // 处理错误，比如提示用户
          console.error('获取订单失败:', res.data.message)
        }
      })
      .catch(err => {
        console.error('请求错误:', err)
      })
})

const formatDate = (dateString) => dayjs(dateString).format('YYYY-MM-DD HH:mm')
</script>

<style scoped>
h2 {
  margin-bottom: 10px;
}
</style>
